<template>
  <div class="content">
    <div class="checkBox">加企微弹窗仅针对未添加企微用户，用户已添加企微客服则不显示该弹窗</div>
    <div class="minApp-name">
      <div> <el-button @click="dialogVisible = true">复用模板</el-button></div>
    </div>
    <!-- 支付成功 -->
    <div class="my-el-form">
      <div class="my-el-form-label">
        支付成功后显示
      </div>
      <div class="my-el-form-content">
        <el-switch
          v-model="pay.status"
          active-color="#13ce66"
          inactive-color="#DCDCDD"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </div>
    </div>
    <el-form
      v-show="pay.status == 1"
      ref="payform"
      :model="pay"
      label-width="120px"
      label-position="top"
      :rules="payrules"
    >

      <el-form-item
        label="企微主体"
        prop="corp_id"
      >
        <el-select
          v-model="pay.corp_id"
          placeholder="请选择"
          style="width: 420px;"
          filterable
          remote
          @change="remoteMethodpay"
        >
          <el-option
            v-for="item in optionsList.weComBody"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="客服号"
        prop="customer_id"
      >
        <el-select
          v-model="pay.customer_id"
          :disabled="!pay.corp_id"
          filterable
          remote
          :placeholder="!pay.corp_id ? '请先选择企微主体' : '请输入关键词' "
          style="width: 420px;"
        >
          <el-option
            v-for="item in optionsList.paycustomer_id"
            :key="item.value"
            :label="item.label"
            :value="item.value +''"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="tag_ids">
        <template slot="label">
          <span> 显示用户类型 </span>
          <el-tooltip
            class="item"
            effect="dark"
            content="用户类型按历史订单算，历史订单有过充值喵币、单剧解锁、会员类购买记录则视为满足对应类型"
            placement="bottom"
          >
            <svg-icon
              icon-class="question"
              class="question"
            />
          </el-tooltip>
        </template>
        <el-checkbox-group v-model="pay.tag_ids">
          <el-checkbox
            v-for="(item, index) in optionsList.tag_ids"
            :key="index"
            :label="item.value + ''"
          >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="样式选择"
        prop="template_id"
      >
        <div class="templateList">
          <el-radio-group v-model="pay.template_id">
            <el-radio
              v-for="(item, index) in optionsList.weComTemplateStyle"
              :key="index"
              size="medium"
              :label="item.value"
            ><el-image :src="item.label"></el-image>
            </el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
    </el-form>
    <!-- 观看页 -->
    <div
      class="my-el-form"
      style="margin-top: 20px ;"
    >
      <div class="my-el-form-label">
        播放页显示
      </div>
      <div class="my-el-form-content">
        <el-switch
          v-model="look.status"
          active-color="#13ce66"
          inactive-color="#DCDCDD"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </div>
    </div>
    <el-form
      v-show="look.status == 1"
      ref="lookform"
      :model="look"
      label-width="120px"
      label-position="top"
      :rules="lookrules"
    >
      <el-form-item
        label="企微主体"
        prop="corp_id"
      >
        <el-select
          v-model="look.corp_id"
          placeholder="请选择"
          style="width: 420px;"
          filterable
          remote
          @change="remoteMethodlook"
        >
          <el-option
            v-for="item in optionsList.weComBody"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="客服号"
        prop="customer_id"
      >
        <el-select
          v-model="look.customer_id"
          :disabled="!look.corp_id"
          filterable
          style="width: 420px;"
          remote
          :placeholder="!look.corp_id ? '请先选择企微主体' : '请输入关键词' "
        >
          <el-option
            v-for="item in optionsList.lookcustomer_id"
            :key="item.value"
            :label="item.label"
            :value="item.value + ''"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="tag_ids">
        <template slot="label">
          <span> 显示用户类型 </span>

          <el-tooltip
            class="item"
            effect="dark"
            content="用户类型按历史订单算，历史订单有过充值喵币、单剧解锁、会员类购买记录则视为满足对应类型"
            placement="bottom"
          >
            <svg-icon
              icon-class="question"
              class="question"
            />
          </el-tooltip>
        </template>
        <el-checkbox-group v-model="look.tag_ids">
          <el-checkbox
            v-for="(item, index) in optionsList.tag_ids"
            :key="index"
            :label="item.value + ''"
          >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="样式选择"
        prop="template_id"
      >
        <div class="templateList">
          <el-radio-group v-model="look.template_id">
            <el-radio
              v-for="(item, index) in optionsList.weComTemplateStyle"
              :key="index"
              size="medium"
              :label="item.value"
            >
              <el-image :src="item.label"></el-image>
            </el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
    </el-form>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="oncheckpay"
      >确 定</el-button>
    </span>
    <el-dialog
      title="选择"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      :before-close="handleClose"
    >
      <div class="copy-main">
        <div>请选择复用的小程序</div>
        <el-select
          v-model="mini_app_id"
          style="margin-left:10px ;"
          filterable
          remote
        >
          <el-option
            v-for="item in optionsList.mini_app"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="onCopy"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { commonData, miniAppList } from '@/api/common'
import { addEnterpriseWechat, getEnterpriseWechat, copyEnterpriseWechat } from '@/api/miniApp'
export default {
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      mini_app_id: '',
      pay: {
        status: '0',
        corp_id: '',
        customer_id: '',
        tag_ids: [],
        template_id: '',
        scene: 1
      },
      look: {
        status: '0',
        corp_id: '',
        customer_id: '',
        tag_ids: [],
        template_id: '',
        scene: 2
      },
      payrules: {
        corp_id: [{ required: true, message: '请选择', trigger: 'change' }],
        customer_id: [{ required: true, message: '请选择', trigger: 'change' }],
        tag_ids: [{ required: true, message: '请选择', trigger: 'change' }],
        template_id: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      lookrules: {
        corp_id: [{ required: true, message: '请选择', trigger: 'change' }],
        customer_id: [{ required: true, message: '请选择', trigger: 'change' }],
        tag_ids: [{ required: true, message: '请选择', trigger: 'change' }],
        template_id: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      optionsList: {
        weComBody: [],
        paycustomer_id: [],
        lookcustomer_id: [],
        tag_ids: [],
        weComTemplateStyle: []
      }
    }
  },
  mounted() {
    console.log(this.rowInfo)
    this.ongetweComBody()
    this.onGetProductType()
    this.onGetweComTemplateStyle()
    this.onGetEnterpriseWechat()
    this.onGetMiniAppList()
  },
  methods: {
    // 小程序下拉
    async onGetMiniAppList() {
      const res = await miniAppList({
        weixin_blongs_id: this.rowInfo.weixin_blongs_id
      })
      if (res.status_code === 1) {
        this.optionsList.mini_app = res.data.filter((item) => {
          console.log(item.id, this.rowInfo.id)
          return item.id != this.rowInfo.id
        })
      }
    },
    // 获取企微数据
    async onGetEnterpriseWechat() {
      const _this = this
      const res = await getEnterpriseWechat({
        mini_app_id: this.rowInfo.id
      })
      if (res.status_code == 1) {
        res.data.forEach((item, index) => {
          if (item.scene == 1) {
            this.pay = {
              id: item.id,
              status: item.status,
              corp_id: item.corp_id,
              customer_id: item.customer_id + '',
              tag_ids: item.tag_ids,
              template_id: item.template_id,
              scene: 1
            }
            _this.remoteMethodpay()
          }
          if (item.scene == 2) {
            this.look = {
              id: item.id,
              status: item.status,
              corp_id: item.corp_id,
              customer_id: item.customer_id + '',
              tag_ids: item.tag_ids,
              template_id: item.template_id,
              scene: 1
            }
            _this.remoteMethodlook()
          }
        })
      }
    },

    // 支付 客服号下拉
    async remoteMethodpay(value) {
      const res = await commonData({
        type: 'corpUser',
        value: this.pay.corp_id
      })
      if (res.status_code === 1) {
        this.optionsList.paycustomer_id = res.data.data
      }
    },
    // 观看 客服号下拉
    async remoteMethodlook(value) {
      const res = await commonData({
        type: 'corpUser',
        value: this.look.corp_id
      })
      if (res.status_code === 1) {
        this.optionsList.lookcustomer_id = res.data.data
      }
    },
    // 企微主体下拉
    async ongetweComBody() {
      const res = await commonData({
        type: 'weComBody',
        value: this.rowInfo.weixin_blongs_id
      })
      if (res.status_code === 1) {
        this.optionsList.weComBody = res.data.data
      }
    },
    // 充值类型下拉 productType
    async onGetProductType() {
      const res = await commonData({
        type: 'productType'
      })
      if (res.status_code === 1) {
        this.optionsList.tag_ids = res.data.data
      }
    },
    // 模板下拉
    async onGetweComTemplateStyle() {
      const res = await commonData({
        type: 'weComTemplateStyle'
      })
      if (res.status_code === 1) {
        this.optionsList.weComTemplateStyle = res.data.data
      }
    },
    close() {
      this.$emit('cancel')
    },
    oncheckpay() {
      // 第一次五修改
      if (this.pay.status === '0' && this.look.status === '0' && this.pay.corp_id === '' && this.look.corp_id === '') {
        this.close()
        return
      }
      if (this.pay.status === '0') {
        this.onchecklook()
      } else {
        this.$refs.payform.validate((valid) => {
          if (valid) {
            this.onchecklook()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    onchecklook() {
      if (this.look.status === '0') {
        this.onSubmit()
      } else {
        this.$refs.lookform.validate((valid) => {
          if (valid) {
            this.onSubmit()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    async onSubmit() {
      this.loading = true
      const params = [
        { ...this.pay, mini_app_id: this.rowInfo.id, scene: 1 },
        { ...this.look, mini_app_id: this.rowInfo.id, scene: 2 }
      ]
      const res = await addEnterpriseWechat(params)
      if (res.status_code == 1) {
        this.$emit('ok')
      }
      this.loading = false
    },
    async onCopy() {
      const _this = this
      if (this.mini_app_id) {
        const res = await getEnterpriseWechat({
          mini_app_id: this.mini_app_id
        })
        if (res.status_code == 1) {
          const payid = this.pay.id ? this.pay.id : ''
          const lookid = this.look.id ? this.look.id : ''
          res.data.forEach((item, index) => {
            if (item.scene == 1) {
              this.pay = {
                status: item.status,
                corp_id: item.corp_id,
                customer_id: item.customer_id,
                tag_ids: item.tag_ids,
                template_id: item.template_id,
                scene: 1
              }
              if (payid) {
                this.pay.id = payid
              }
              _this.remoteMethodpay()
            }
            if (item.scene == 2) {
              this.look = {
                status: item.status,
                corp_id: item.corp_id,
                customer_id: item.customer_id,
                tag_ids: item.tag_ids,
                template_id: item.template_id,
                scene: 1
              }
              if (lookid) {
                this.look.id = lookid
              }
              _this.remoteMethodlook()
            }
          })
        }
        this.dialogVisible = false
      } else {
        this.$message.error('请选择小程序')
      }
    },
    handleClose() {
      this.mini_app_id = ''
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.rowFlex {
  z-index: 1000;
}
.my-el-form {
  display: flex;
  align-items: center;
  margin-bottom: 18px;

  .my-el-form-label {
    padding-right: 12px;
    display: flex;
    justify-content: end;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
::v-deep.el-form {
  background-color: #f7f8fa;
  padding: 20px;
  padding-bottom: 0;
}
.content {
  padding: 0 20px;
  padding-bottom: 70px;
  overflow-y: auto;
  .minApp-name {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 10px 0;
  }
  .msg {
    font-size: 12px;
    color: #999;
    padding: 10px 0;
  }
  .templateList {
    width: 100%;
    overflow-x: auto;
    display: flex;
  }
}
.copy-main {
  display: flex;
  align-items: center;
}
.checkBox {
  width: 100%;
  height: auto;
  background: #fdf6ec;
  border-radius: 4px;
  border: 1px solid #f2bc69;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e6a23c;
  padding: 10px;
  // margin-bottom: 20px;
  margin-top: 8px;
}
::v-deep.el-form-item--small .el-form-item__label {
  font-weight: 500;
}
::v-deep .el-dialog .el-dialog__footer {
  padding: 0 !important;
}
::v-deep.dialog-footer {
  display: flex;
  width: 100%;
}
::v-deep.el-radio-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 270px;
  .el-radio {
    height: 270px;
    width: 160px;
    margin: 0 7px;
    // padding: 10px 0;
    // flex: 1;
    .el-radio__label {
      flex: 1;
      margin-bottom: 10px;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
::v-deep.el-radio {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  width: 150px;
  height: 220px;
  padding-bottom: 10px;
}
::v-deep.el-radio:last-child {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}
</style>